<template>
  <el-dialog
    title="审批流程"
    :visible.sync="dialogVisible"
    width="90%"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <div class="wrapper">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始日期">
                <el-date-picker
                  v-model="form.start"
                  readonly
                  type="date"
                  placeholder="开始日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="截止日期">
                <el-date-picker
                  type="date"
                  readonly
                  placeholder="截止日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.end"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="查看事由">
                <el-input
                  type="textarea"
                  :rows="3"
                  readonly
                  placeholder="请输入内容"
                  v-model="form.applyContent"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label-width="10px" style="background: #f5f5f5;">
            <DocumentCenterVue ref="documentCenterRef" :personList="dataName"/>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="反馈意见">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="returnContent"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="primary"
        @click="clickAuthorization"
        >授 权</el-button
      >
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="primary"
        @click="clickApprove"
        >审批通过</el-button
      >
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="danger"
        @click="turnDown"
        >驳回申请</el-button
      >
    </span>
  </el-dialog>
</template>
    
<script>
import {
  getDetail,
  authorization,
  approval,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
import DocumentCenterVue from './documentCenter.vue'
export default {
  components: { DocumentCenterVue },
  data() {
    return {
      form: {
        start: "",
        end: "",
        applyContent: "",
      },
      imageData: [],
      treeData: [],
      checkedCities: [],
      selectedImageIndex: 0,
      currentNodekey: "",
      isIndeterminate: true,
      checkAll: false,
      dialogVisible: false,
      row: null,
      dataName: [],
      rowItem: null,
      returnContent: "",
      applyId: "",
      materialid: "1",
      description: "",
      name: "",
      idCard: "",
      auditState: null,
      auditStateFlag: false,
      valueFlag: false,
    };
  },
  created() {},
  methods: {
    init(row) {
      this.dialogVisible = true;
      this.row = row;
      this.getListDetail();
    },
    //详情
    getListDetail() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: this.row.applyId,
        },
      };
      getDetail(params).then((result) => {
        if (result.result) {
          this.applyId = result.resultdata.data.applyId;
          this.form.start = result.resultdata.data.startDate;
          this.form.end = result.resultdata.data.endDate;
          this.form.applyContent = result.resultdata.data.applyContent;
          this.returnContent = result.resultdata.data.returnContent;
          this.auditState = result.resultdata.data.auditState;
          if (this.auditState === 1) {
            this.auditStateFlag = true;
          } else {
            this.auditStateFlag = false;
          }
          this.dataName = result.resultdata.data.personList;
          // this.name = this.dataName[0].personName;
          // this.idCard = this.dataName[0].idCard;
          this.checkedCities = []; // 初始化为一个空数组
          this.isIndeterminate = true;
          this.checkAll = false;
          const centerRef = this.$refs.documentCenterRef
          // debugger
          if (this.dataName[0].empowerLable === "全部") {
            centerRef&& centerRef.setAllChecked(true)
          } else {
            centerRef && centerRef.setAllChecked(false)
            centerRef && centerRef.setSelectIamge(this.dataName[0].empowerLable)
          }
        }
      });
    },

    // 设置选中数据
    setTreeDataFun(item) {
      try {
        const { empowerLable = "" } = item;
        const fileNames = empowerLable.split(",");
        fileNames.forEach((fileName) => {
          //将拼接的fileName和name还原
          const name = fileName.split("_")[0]; // 获取 name
          const realFileName = fileName.split("_")[1]; // 获取真正的文件名
          // 遍历this.treeData中的每一项
          this.treeData.forEach((treeItem) => {
            if (Array.isArray(treeItem.children)) {
              // 遍历该目录下的每一张图片
              treeItem.children.forEach((imageItem) => {
                if (imageItem.name == name) {
                  // 如果图片文件名相同
                  // 查找对应的图片对象
                  this.imageData.forEach((item) => {
                    let itemFileName = item.fileName.replace(".jpg", "");
                    if (itemFileName == realFileName) {
                      this.checkedCities.push(item.elecId);
                    }
                  });
                }
              });
            }
          });
        });
      } catch (error) {
        console.error("setTreeDataFun", error);
      }
    },

    // 点击小图切换大图
    selectImage(index) {
      this.selectedImageIndex = index;
    },
    // 授权
    clickAuthorization() {
      let empowStr = ''
      let empowId = ''
      const centerRef = this.$refs.documentCenterRef
      if(centerRef) {
        const { text, dataId } = centerRef.getEmpowerStr()
        empowStr = text;
        empowId = dataId
      }
      
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          empowerLable: empowStr, //授权图片名称和目录名称结合以逗号的形式传入
          dataId: empowId, //授权人id
        },
      };
      authorization(params).then((result) => {
        if (result.result) {
          this.$message({
            message: "授权成功",
            type: "success",
          });
          this.getListDetail();
        }
      });
    },

    // 审批通过
    clickApprove() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: this.applyId,
          startDate: this.form.start,
          endDate: this.form.end,
          returnContent: this.returnContent,
          auditState: 2,
        },
      };
      approval(params).then((result) => {
        if (result.result) {
          this.$message({
            message: "审批通过",
            type: "success",
          });
          this.dialogVisible = false;
        }
      });
    },
    // 驳回申请
    turnDown() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: this.applyId,
          startDate: this.form.start,
          endDate: this.form.end,
          returnContent: this.returnContent,
          auditState: 3,
        },
      };
      approval(params).then((result) => {
        if (result.result) {
          this.$message({
            message: "驳回申请成功",
            type: "success",
          });
          this.dialogVisible = false;
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
  
<style scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
.left {
  float: left;
  margin-left: 5px;
  background: #f7f2ec;
  width: 18.417vw;
  overflow-y: scroll;
}
.nameStyle {
  text-align: center;
  font-size: 18px;
  color: #409eff;
  overflow-y: scroll;
}
.nameStyle p {
  padding: 5px;
  height: 40px;
}
.highlight {
  background-color: #c6e2ff;
  padding: 5px;
  height: 40px;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
}
.thumbnail {
  width: 205px;
  overflow-y: scroll;
  float: left;
  margin-bottom: 5px;
  background: #fff;
}
.image-container {
  display: flex;
  padding-right: 0.521vw;
  margin-top: 5px;
  justify-content: space-around;
}
.image-container /deep/.el-checkbox__label {
  display: none;
}

.bigPicture {
  float: left;
  width: 600px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  margin-left: 10px;
}
>>> .el-tree-node__content {
  height: 60px;
}
.centerWarp {
  display: flex;
}
/deep/ .el-tree > .el-tree-node > .el-tree-node__content {
  font-weight: 900;
  background: #cfe5fc;
}
/deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label {
  font-weight: 700;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: #6baef1;
}

>>> .el-tree-node__content {
  /* background-color: #CFE5FC; */
  margin-top: 2px;
}
</style>